<template>
  <basic-dialog :visible="show"
                minWidth="720px"
                title="关联工单"
                isShowClose
                @submit="submit"
                is-show-basic-footer
                @close="hideDialog">
    <div>
      <div class="margin-20 content-wrapper flex justify-between">
        <div>生产日期: {{ row.workDate || '--' }}</div>
        <div>加工班次: {{ row.shiftName || '--' }}</div>
        <div>加工设备: {{ row.deviceName || '--' }}</div>
      </div>
      <q-table
        selection="single"
        :selected.sync="selected"
        :data="tableData"
        :columns="columns"
        row-key="id"
        class="myTable scroll"
        :loading="isTableLoading"
        :hide-bottom="tableData.length !== 0"
        no-data-label="暂无数据"
        color="primary"
      >
        <template v-slot:body="props">
          <q-tr :props="props">
            <q-td auto-width>
              <q-radio dense v-model="selected[0]" :val="props.row.id"/>
            </q-td>
            <q-td>
              {{ props.row.id || '--' }}
            </q-td>
            <q-td>
              {{ props.row.materialNames }}
            </q-td>
            <q-td>
              {{ props.row.processName }}
            </q-td>
            <q-td>
              <div class="status"
                   :style="{'background': statusObj[props.row.orderStatus] ? statusObj[props.row.orderStatus].color : ''}"></div>
              {{ statusObj[props.row.orderStatus] ? statusObj[props.row.orderStatus].label : '--' }}
            </q-td>
          </q-tr>
        </template>
      </q-table>
    </div>
  </basic-dialog>
</template>

<script>
import { getOverproduceRelateWorkOrders } from 'src/boot/job/process-order'
import _ from 'lodash'

export default {
  name: 'AssociatedWorkOrder',
  data () {
    return {
      show: false,
      selected: [],
      isTableLoading: false,
      columns: [
        { name: 'deviceId', label: '工单编号', align: 'left', field: 'deviceId' },
        { name: 'materialNames', label: '产品名称（编号）', align: 'left', field: 'materialNames' },
        { name: 'processName', label: '加工工序', align: 'left', field: 'processName' },
        { name: 'orderStatus', label: '工单状态', align: 'left', field: 'orderStatus' }
      ],
      tableData: []
    }
  },
  props: {
    row: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    row: {
      immediate: true,
      deep: true,
      handler: function (val) {
        if (val) {
          this.getData()
        }
      }
    }
  },
  computed: {
    statusObj () {
      const obj = {}
      Object.entries(this.Enums.BUSINESS_STATUS).forEach(entry => {
        obj[entry[1].value] = {
          label: entry[1].desc,
          color: entry[1].color
        }
      })
      return obj
    }
  },
  methods: {
    showDialog () {
      this.show = true
    },
    getData () {
      const params = {
        deviceId: this.row.deviceId,
        shiftId: this.row.shiftId,
        workDate: this.row.workDate
      }
      this.isTableLoading = true
      getOverproduceRelateWorkOrders(params).then(res => {
        this.tableData = res.data.map(item => {
          return {
            ...item,
            id: item.groupId,
            materialNames: _.join(item.materialNames, '、'),
            processName: `${item.isCombinedWorkOrder ? '' : (item.processSort + 1) + '-'}${this.$utils.label(item.processName)}`
          }
        })
        if (res.data && res.data.length > 0) {
          this.selected[0] = this.tableData[0].id
        }
      }).finally(() => {
        this.isTableLoading = false
      })
    },
    // 隐藏弹框
    hideDialog () {
      this.show = false
    },

    submit () {
      const selectId = this.selected[0]
      const selectRow = this.tableData.find(item => item.id === selectId)
      this.$emit('confirm', selectRow)
      this.show = false
    }
  }
}
</script>

<style scoped lang="stylus">

</style>
